<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>

import * as echarts from 'echarts'

export default {
  name: "eight",
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '1500px'
    },
    height: {
      type: String,
      default: '750px'
    }
  },
  data() {
    return {
      // 查询参数
      params: {
        monthCnt: -10
      },
      chart: null,
      chartTimer: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions()
    },

    setOptions() {
      this.chart.setOption(
          {
            title: {
              show: true,
              text: "近一年来金融机构绿色授信户数统计",
              left: "center",
              top: "1%",
              textStyle: {
                fontSize: 18,
                color: "#293C55",
                fontStyle: "normal",
                fontWeight: "normal"
              }
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              top: '5%',
              data: [
                '总发债户数',
                '总授信户数',
                '绿色金融授信户数',
                '科创金融授信户数',
                '普惠金融授信户数',
                '涉农授信户数',
                '专精特新授信户数',
                '绿色债户数',
                '乡村振兴债户数'
              ]
            },
            series: [
              {
                name: '总户数',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                  position: 'inner',
                  fontSize: 14
                },
                labelLine: {
                  show: false
                },
                data: [
                  {value: 100, name: '总发债户数'},
                  {value: 200, name: '总授信户数'}
                ]
              },
              {
                name: '分类户数',
                type: 'pie',
                radius: ['45%', '60%'],
                labelLine: {
                  length: 30
                },
                label: {
                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                  backgroundColor: '#F6F8FC',
                  borderColor: '#8C8D8E',
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    a: {
                      color: '#6E7079',
                      lineHeight: 22,
                      align: 'center'
                    },
                    hr: {
                      borderColor: '#8C8D8E',
                      width: '100%',
                      borderWidth: 1,
                      height: 0
                    },
                    b: {
                      color: '#4C5058',
                      fontSize: 14,
                      fontWeight: 'bold',
                      lineHeight: 33
                    },
                    per: {
                      color: '#fff',
                      backgroundColor: '#4C5058',
                      padding: [3, 4],
                      borderRadius: 4
                    }
                  }
                },
                data: [
                  {value: 40, name: '绿色金融授信户数'},
                  {value: 40, name: '科创金融授信户数'},
                  {value: 40, name: '普惠金融授信户数'},
                  {value: 40, name: '涉农授信户数'},
                  {value: 40, name: '专精特新授信户数'},

                  {value: 50, name: '绿色债户数'},
                  {value: 50, name: '乡村振兴债户数'}
                ]
              }
            ]
          }
      )
    }
  }
}
</script>

<style scoped>

</style>
